<template>
  <ElSelect :model-value="modelValue"
    filterable
    @change="$emit('update:modelValue', $event)"
    size="small" class="var-input-choice">
    <ElOption v-for="item in t.options" :label="item" :value="item"/>
  </ElSelect>
</template>

<script setup lang="ts">
import { ChoiceType } from '~/models/types/choice_type';
import type { DataType } from '~/models/types/type';

const props = defineProps<{
  type: DataType
  modelValue: string
}>()
const t = computed(() => props.type as ChoiceType)
defineEmits<{
  (e: 'update:modelValue', event: string): void,
}>()
</script>

<style lang="scss">
.var-input-choice {
  width: 120px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  outline: none;
  .el-select__wrapper {
    color: #000;
  }
  .el-select__selected-item.el-select__placeholder {
    color: #000;
  }
}
</style>